<script setup lang="ts">
import { useBuyStore } from "@/store/buy"

const store = useBuyStore()

</script>

<template>
  <t-dialog
    v-model:visible="store.aliPay.codeVisible"
    :header="false"
    width="auto"
    :footer="false"
    destroyOnClose
  >
    <t-row class="container">
      <t-loading :loading="store.aliPay.loading" size="small">
        <img :src="store.aliPay.url" alt="" class="qrcode" :key="store.aliPay.key" @load="store.aliPay.loading = false"/>
      </t-loading>
    </t-row>
    <t-divider content="支付宝扫描二维码支付" class="divider"/>
  </t-dialog>

  <t-dialog
    v-model:visible="store.wechatPay.codeVisible"
    :header="false"
    width="auto"
    :footer="false"
    destroyOnClose
  >
    <t-row class="container">
      <t-loading :loading="store.wechatPay.loading" size="small">
        <img :src="store.wechatPay.url" alt="" class="qrcode" :key="store.wechatPay.key" @load="store.wechatPay.loading = false"/>
      </t-loading>
    </t-row>
    <t-divider content="微信扫描二维码支付" class="divider"/>
  </t-dialog>
</template>

<style scoped lang="less">
@border-color: var(--td-component-border);
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  .qrcode{
    width: 200px;
    height: 200px;
    border: @border-color 1px solid;
    margin: 15px;
    border-radius: 10px;
  }
}
.divider{
  margin: 10px 0;
}
</style>
